<template>
  <div v-if="props.visible" class="dialog-mask" @click="handleMaskClick" >
    <div class="dialog-container" @click.stop>
      <div v-if="props.title" class="dialog-header" :style="props.showBorder? {borderBottom: '1px solid #e8e8e8'} : {} ">
        <span>{{ props.title }}</span>
        <SvgIcon icon-class="msg-关闭" class="close-btn" @click="handleClose"></SvgIcon>
      </div>
      <div class="dialog-body">
        <slot name="content">{{ props.content }}</slot>
      </div>
      <!-- 底部按钮  $slots.footer的作用是：当有footer插槽时，才会渲染footer插槽的内容。 -->
      <div v-if="$slots.footer" class="dialog-footer" :style="props.showBorder? {borderTop: '1px solid #e8e8e8'} : {}">
        <slot name="footer" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps} from 'vue'
import SvgIcon from "@/components/common/SvgIcon.vue";

const props = defineProps({
  visible: Boolean,
  title: String,
  showBorder: {
    type: Boolean,
    default: true
  },
  content: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:visible'])

const handleClose = () => {
  emit('update:visible', false)
}

const handleMaskClick = (event: MouseEvent) => {
  if (event.target === event.currentTarget) {
    handleClose()
  }
}
</script>

<style scoped lang="less">
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-container {
  background: white;
  border-radius: 8px;
  //width: 60%;
  max-width: 800px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: dialog-in 0.3s ease;

  .dialog-header {
    padding: 16px;
    //border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
  }

  .dialog-body {
    padding: 24px;
    min-height: 100px;
  }

  .dialog-footer {
    padding: 16px;
    //border-top: 1px solid #e8e8e8;
    text-align: right;
  }

  .close-btn {
    font-size: 18px;
    color: #666;
    &:hover {
      color: #333;
      cursor: pointer;
    }
  }
}

/* 定义关键帧动画 */
@keyframes dialog-in {
  0% {
    opacity: 0;
    transform: scale(0.9); /* 初始缩小 */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* 恢复原大小 */
  }
}
</style>
